<markdown>
# 基础用法
</markdown>

<template>
  <x-table :columns="columns" :data="data">
    <template #fanju="{ row, index }">
      <x-tag size="medium">
        <x-a :href="row.src" target="blank">{{ row.fanju }}</x-a>
      </x-tag>
    </template>
    <template #tags="{ row, index }">
      <x-space>
        <x-tag v-for="tag in row.tags">{{ tag }}</x-tag>
      </x-space>
    </template>
  </x-table>
</template>

<script setup>
const columns = [
  { title: '番剧', key: 'fanju' },
  { title: '风格', key: 'tags' },
  { title: '评分', key: 'rate' }
]

const data = [
  {
    fanju: '关于我转生变成史莱姆这档事 第二季',
    src: 'https://www.bilibili.com/bangumi/play/ep409822',
    tags: ['小说改', '奇幻', '战斗', '魔法'],
    rate: 9.1
  },
  {
    fanju: '擅长捉弄的高木同学 第二季',
    src: 'https://www.bilibili.com/bangumi/play/ep277026',
    tags: ['漫画改', '校园', '恋爱', '日常'],
    rate: 9.9
  },
  {
    fanju: '精灵幻想记',
    src: 'https://www.bilibili.com/bangumi/play/ss38933',
    tags: ['小说改', '奇幻', '穿越'],
    rate: 7.2
  },
  {
    fanju: '开挂药师的奇幻世界悠闲生活',
    src: 'https://www.bilibili.com/bangumi/play/ss38954',
    tags: ['小说改', '穿越', '日常'],
    rate: 8.9
  },
  {
    fanju: '埃罗芒阿老师',
    src: 'https://www.bilibili.com/bangumi/play/ss5997',
    tags: ['小说改', '搞笑', '恋爱'],
    rate: 9.2
  },
  {
    fanju: '魔女之旅',
    src: 'https://www.bilibili.com/bangumi/play/ss34412',
    tags: ['小说改', '魔法', '奇幻', '架空'],
    rate: 9.7
  },
  {
    fanju: '珈百璃的堕落',
    src: 'https://www.bilibili.com/bangumi/play/ss5793',
    tags: ['日常', '漫画改', '神魔'],
    rate: 9.2
  }
]
</script>
